<template>
    <v-card>
        <v-toolbar class="elevation-0">
            <v-btn color="error" @click="deleteSongs">批量删除</v-btn>
            <v-spacer/>
            <v-flex xs3>
                状态：
                <v-btn-toggle mandatory v-model.lazy="state">
                    <v-btn :value="0">
                        全部
                    </v-btn>
                    <v-btn :value="1">
                        待审核
                    </v-btn>
                    <v-btn :value="2">
                        不通过
                    </v-btn>
                </v-btn-toggle>
            </v-flex>
            <v-flex xs3>
                <v-text-field
                        append-icon="search"
                        label="搜索"
                        single-line
                        hide-details
                        v-model="search"
                        @click:append="getDataFromServer"
                />
            </v-flex>
        </v-toolbar>
        <v-divider/>
        <div>
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :default-sort = "{prop: 'name', order: 'descending'}"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column type="index">
                </el-table-column>
                <el-table-column label="图片" >
                    <template slot-scope="scope">
                        <v-img
                            width="80px"
                            :src="scope.row.picture"
                            aspect-ratio="1"
                            class="grey lighten-2"
                    >
                        <template v-slot:placeholder>
                            <v-layout
                                    fill-height
                                    align-center
                                    justify-center
                                    ma-0
                            >
                                <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                            </v-layout>
                        </template>
                    </v-img>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        sortable
                        label="名称"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="audioDuration"
                        sortable
                        label="时长"
                        width="120">
                </el-table-column>
                <el-table-column label="歌词" width="120">
                    <template slot-scope="scope">
                        <span class="tb_label" @click.prevent="showLyric(scope.row.lyric)">查看</span>
                    </template>
                </el-table-column>
                <el-table-column label="播放详情" width="120">
                    <template slot-scope="scope">
                        <span class="tb_label" @click.prevent="showPlay(scope.row)">查看</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="100">
                    <template slot-scope="scope">
                        <span style="color: dodgerblue" v-if="scope.row.state===1">待审核</span>
                        <span style="color: red" v-if="scope.row.state===2">不通过</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                :disabled="scope.row.state===2?true:false"
                                type="success"
                                @click="handlePass(scope.row.id,0)">通过</el-button>
                        <el-button
                                size="mini"
                                :disabled="scope.row.state===2?true:false"
                                type="danger"
                                @click="handlePass(scope.row.id,2)">不通过</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <v-dialog max-width="500" v-model="show" persistent scrollable>
                <v-card>
                    <!--对话框的标题-->
                    <v-toolbar dense dark color="primary">
                        <v-toolbar-title>歌词详情</v-toolbar-title>
                        <v-spacer/>
                        <!--关闭窗口的按钮-->
                        <v-btn icon @click="closeWindow">
                            <v-icon>close</v-icon>
                        </v-btn>
                    </v-toolbar>
                    <v-card-text class="px-3" style="height: 400px">
                        <el-input
                                type="textarea"
                                style=""
                                v-model="lyric"
                                show-word-limit
                                size="medium"
                                :autosize="{ minRows: 15, maxRows: 15}"
                        >
                        </el-input>
                    </v-card-text>
                </v-card>
            </v-dialog>
        </div>
        <div class="text-xs-center pt-2">
            <v-pagination v-model="pagination.page" :length="pagination.totalPage"></v-pagination>
        </div>
    </v-card>
</template>

<script>
export default {
data() {
    return {
        search:'',
        lyric: '',
        state: 0,
        show:false,
        pagination: {
            rowsPerPage :5,
            page:1
        },
        tableData: [],
        multipleSelection: []
    }
},
    methods: {
    deleteSongs() {},
    showPlay(songInfo) {
      this.$router.push({name: 'PlayerPage', params:{songInfo: songInfo}})
    },
    handlePass(songId,state) {
        const params = this.$qs.stringify({
            songId : songId,
                state: state
        })
        this.$http.post("/check/changeState",params).then(()=>{
            this.$message.success("审核成功")
            this.getDataFromServer()
        }).catch(()=>{
            this.$message.error("审核失败")
        })
    },
    closeWindow() {
        this.show=false
    },
    showLyric(i) {
        this.show = true
        this.lyric = i
    },
    getDataFromServer(){
        this.$http.get("/check/page",{
            params: {
                key: this.search,
                state: this.state,
                page: this.pagination.page,
                rows: this.pagination.rowsPerPage,
            }
        }).then(resp =>  {
            console.log(resp.data)
            this.tableData = resp.data.items
            this.pagination.totalItems = resp.data.total;
            this.pagination.totalPage = resp.data.totalPage;
            this.loading = false;
        }).catch(()=>{
            this.tableData = [];
            this.loading = false;
        })
    },
    clear() {},
    getDetail() {
        this.$router.push("../upload/Detail")
    },
    toggleSelection(rows) {
        if (rows) {
            rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
            });
        } else {
            this.$refs.multipleTable.clearSelection();
        }
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
    }
    },
    created() {
        this.getDataFromServer()
    },
    watch: {
        state: function () {
           this.getDataFromServer()
        },
        search: function () {
            this.getDataFromServer()
        }
    }
}
</script>

<style scoped>
    .tb_label{
        cursor: pointer;
        color: #20a0ff;
    }
</style>